<template>
  <view class="container flex-1 bg-back">
    <Nprogress :step="2" title="选择风格" />
    <view class="px-[3%]" :class="isBigSreen ? '' : 'pb-24'">
      <view class="flex flex-wrap">
        <view
          style="aspect-ratio: 343/188"
          class="w-full px-[1%] overflow-hidden mb-[3%] flex"
          v-for="(item, index) in list"
          :key="index"
          @click="choose(index, item)"
        >
          <view
            class="relative flex-1 rounded-[20rpx] overflow-hidden"
            :class="{ bor: current == index }"
            style="border: 1px solid transparent"
          >
            <image
              style="aspect-ratio: 66 / 343"
              class="w-full h-full"
              :src="item.style_image"
              mode="widthFix"
            ></image>
            <image
              v-if="current == index"
              src="@/static/choose.png"
              class="w-6 h-6 absolute top-[2%] right-[2%] z-10"
            ></image>
            <view class="box">
              <view
                class="pb-[2%] text-white font-bold"
                :class="isBigSreen ? 'text-2main' : 'text-xl'"
              >
                {{ item.title }}
              </view>
              <view
                class="font-[350] text-[#97979fc4] flex justify-between"
                :class="isBigSreen ? 'text-2base' : 'text-base'"
                F
              >
                <view class="">{{ item.share_total }}次分享</view>
                <view>{{ item.select_total }}人选择</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="fixed bottom-0 footer flex items-center w-full z-10"
      v-if="!isBigSreen"
    >
      <view class="flex-1 flex justify-between items-center">
        <view class="flex items-center">
          <view class="text-main font-bold pl-2 pr-6" @click="goHome"
            >首页</view
          >
          <view class="text-main font-bold prev" @click="goBack">上一步</view>
        </view>
      </view>
    </view>
    <view class="slide" v-if="isBigSreen">
      <view v-if="open" class="content">
        <view class="circle dark mb-30" @click="goBack"> 上一步 </view>
        <view class="circle dark" @click="goHome"> 首页 </view>
      </view>
      <view class="jiantou">
        <view :class="open ? 'a mt-6' : 'b'" @click="handleSilde">
          <up-icon name="arrow-left-double" color="#8a8f96" size="36"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { getAllStyle } from "@/api/index.js";
import { onLoad } from "@dcloudio/uni-app";

import Nprogress from "@/components/Nprogress.vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const current = ref(-1);

const scene = uni.getStorageSync("scene") || {};
console.log(scene);
const choose = (index, item) => {
  current.value = index;
  uni.setStorageSync("scene", {
    scene_id: scene.scene_id, //场景id
    scene_text: scene.scene_text, //场景描述
    style_id: item.id, //风格id
    size_id: "", //尺寸id
  });
  uni.navigateTo({
    url: `/pages/index/chooseSize`,
  });
};
const list = ref([]);
const getList = () => {
  getAllStyle().then((res) => {
    list.value = res;
  });
};
const goBack = () => {
  uni.navigateBack();
};

const open = ref(true);
const handleSilde = () => {
  open.value = !open.value;
};

const goHome = () => {
  uni.removeStorageSync("scene");
  uni.reLaunch({
    url: "/pages/index/index",
  });
};

onLoad(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  padding: 2% 1.8%;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  // height: 170rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0px 20px 10px 10px;
  border: 2rpx solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.20000000298023224),
      rgba(255, 255, 255, 0)
    )
    1 1;
  backdrop-filter: blur(8rpx);
}
.bor {
  border: 2rpx solid #2568ec !important;
}
.footer {
  width: 100%;
  padding: 0 40rpx;
  height: 156rpx;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  .prev {
    width: 160rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
  }
  .change {
    width: 240rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 50rpx;
    border: 2rpx solid #2568ec;
    text-align: center;
    font-weight: 700;
    font-size: 32rpx;
    color: #1250b5;
  }
}
.slide {
  position: fixed;
  z-index: 888;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 48rpx 20rpx;
  bottom: 20%;
  width: 248rpx;
  background: linear-gradient(
    180deg,
    rgba(53, 58, 64, 0.9) 0%,
    rgba(22, 23, 27, 0.9) 100%
  );
  border-radius: 64rpx 0rpx 0rpx 120rpx;
  border: 1rpx solid;
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(66.00000366568565, 71.00000336766243, 80.00000283122063, 1),
  //     rgba(32.00000189244747, 35.00000171363354, 38.0000015348196, 1)
  //   )
  //   4 4;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 188rpx;
    height: 188rpx;
    font-size: 48rpx;
    font-weight: 600;
    text-align: center;
    color: #c3c8cd;
    &.light {
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 0px 50px rgba(38, 171, 247, 0.2),
        0px 0px 20px rgba(99, 207, 255, 0.5);
      background: linear-gradient(321deg, #0077ce 0%, #4ec0ff 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      filter: blur(0.3px);
    }
    &.dark {
      background: linear-gradient(321deg, #2f353a 0%, #1c1f22 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      box-shadow: inset 0rpx 0rpx 3rpx 0rpx rgba(63, 63, 63, 0.45);
      filter: blur(0.3px);
    }
    &.mb-30 {
      margin-bottom: 30rpx;
    }
  }
  .jiantou {
    .a {
      transform: rotate(90deg);
    }
    .b {
      transform: rotate(-90deg);
    }
  }
}
</style>
